<template>
  <q-page class="q-pa-md">
    <div class="row q-gutter-md">
      <!-- 左侧控制面板 -->
      <div class="col-12 col-md-4">
        <q-card>
          <q-card-section>
            <div class="text-h6 q-mb-md">
              <q-icon name="layers" class="q-mr-sm" />
              DICOM+NII组合加载
            </div>
            
            <!-- DICOM文件选择 -->
            <q-expansion-item
              expand-separator
              icon="medical_services"
              label="DICOM数据"
              header-class="text-primary"
              default-opened
              class="q-mb-md"
            >
              <q-file
                v-model="dicomFile"
                label="选择DICOM文件"
                accept=".dcm,.dicom"
                @update:model-value="onDicomSelected"
                class="q-mb-md"
              >
                <template v-slot:prepend>
                  <q-icon name="image" />
                </template>
              </q-file>

              <div v-if="dicomLoaded" class="q-mb-md">
                <q-card flat bordered>
                  <q-card-section>
                    <div class="text-subtitle2 q-mb-sm">DICOM信息</div>
                    <q-list dense>
                      <q-item>
                        <q-item-section>
                          <q-item-label caption>文件名</q-item-label>
                          <q-item-label>{{ dicomInfo.fileName }}</q-item-label>
                        </q-item-section>
                      </q-item>
                      <q-item>
                        <q-item-section>
                          <q-item-label caption>图像尺寸</q-item-label>
                          <q-item-label>{{ dicomInfo.dimensions }}</q-item-label>
                        </q-item-section>
                      </q-item>
                    </q-list>
                  </q-card-section>
                </q-card>
              </div>
            </q-expansion-item>

            <!-- NII文件选择 -->
            <q-expansion-item
              expand-separator
              icon="psychology"
              label="NII数据"
              header-class="text-secondary"
              default-opened
              class="q-mb-md"
            >
              <q-file
                v-model="niiFile"
                label="选择NII文件"
                accept=".nii,.nii.gz"
                @update:model-value="onNiiSelected"
                class="q-mb-md"
              >
                <template v-slot:prepend>
                  <q-icon name="view_in_ar" />
                </template>
              </q-file>

              <div v-if="niiLoaded" class="q-mb-md">
                <q-card flat bordered>
                  <q-card-section>
                    <div class="text-subtitle2 q-mb-sm">NII信息</div>
                    <q-list dense>
                      <q-item>
                        <q-item-section>
                          <q-item-label caption>文件名</q-item-label>
                          <q-item-label>{{ niiInfo.fileName }}</q-item-label>
                        </q-item-section>
                      </q-item>
                      <q-item>
                        <q-item-section>
                          <q-item-label caption>数据维度</q-item-label>
                          <q-item-label>{{ niiInfo.dimensions }}</q-item-label>
                        </q-item-section>
                      </q-item>
                    </q-list>
                  </q-card-section>
                </q-card>
              </div>
            </q-expansion-item>

            <!-- 配准控制 -->
            <q-card v-if="dicomLoaded && niiLoaded" flat bordered class="q-mb-md">
              <q-card-section>
                <div class="text-subtitle2 q-mb-sm">
                  <q-icon name="compare" class="q-mr-sm" />
                  图像配准
                </div>
                
                <div class="q-mb-md">
                  <q-btn
                    color="accent"
                    label="自动配准"
                    @click="autoRegistration"
                    :loading="registering"
                    class="full-width q-mb-xs"
                  />
                  <q-btn
                    color="info"
                    label="手动调整"
                    @click="manualRegistration"
                    class="full-width"
                  />
                </div>

                <div v-if="registrationResult" class="q-mb-md">
                  <q-list dense>
                    <q-item>
                      <q-item-section>
                        <q-item-label caption>配准精度</q-item-label>
                        <q-item-label>{{ registrationResult.accuracy }}%</q-item-label>
                      </q-item-section>
                    </q-item>
                    <q-item>
                      <q-item-section>
                        <q-item-label caption>变换矩阵</q-item-label>
                        <q-item-label caption>{{ registrationResult.transform }}</q-item-label>
                      </q-item-section>
                    </q-item>
                  </q-list>
                </div>
              </q-card-section>
            </q-card>

            <!-- 融合控制 -->
            <q-card v-if="dicomLoaded && niiLoaded" flat bordered class="q-mb-md">
              <q-card-section>
                <div class="text-subtitle2 q-mb-sm">
                  <q-icon name="merge_type" class="q-mr-sm" />
                  图像融合
                </div>
                
                <!-- 融合模式 -->
                <div class="q-mb-md">
                  <div class="text-caption q-mb-xs">融合模式</div>
                  <q-btn-toggle
                    v-model="fusionMode"
                    toggle-color="primary"
                    :options="[
                      {label: '叠加', value: 'overlay'},
                      {label: '混合', value: 'blend'},
                      {label: '对比', value: 'compare'}
                    ]"
                    @update:model-value="updateFusionMode"
                    class="full-width"
                  />
                </div>

                <!-- DICOM透明度 -->
                <div class="q-mb-md">
                  <div class="text-caption q-mb-xs">DICOM透明度: {{ dicomOpacity }}</div>
                  <q-slider
                    v-model="dicomOpacity"
                    :min="0"
                    :max="1"
                    :step="0.1"
                    label
                    @update:model-value="updateOpacity"
                  />
                </div>

                <!-- NII透明度 -->
                <div class="q-mb-md">
                  <div class="text-caption q-mb-xs">NII透明度: {{ niiOpacity }}</div>
                  <q-slider
                    v-model="niiOpacity"
                    :min="0"
                    :max="1"
                    :step="0.1"
                    label
                    @update:model-value="updateOpacity"
                  />
                </div>

                <!-- 颜色映射 -->
                <div class="q-mb-md">
                  <div class="text-caption q-mb-xs">NII颜色映射</div>
                  <q-select
                    v-model="niiColorMap"
                    :options="colorMapOptions"
                    @update:model-value="updateColorMap"
                  />
                </div>
              </q-card-section>
            </q-card>

            <!-- 视图控制 -->
            <q-card v-if="dicomLoaded && niiLoaded" flat bordered>
              <q-card-section>
                <div class="text-subtitle2 q-mb-sm">
                  <q-icon name="visibility" class="q-mr-sm" />
                  视图控制
                </div>
                
                <!-- 显示切换 -->
                <q-btn-group spread class="q-mb-md">
                  <q-btn
                    :color="showDicom ? 'primary' : 'grey'"
                    :icon="showDicom ? 'visibility' : 'visibility_off'"
                    label="DICOM"
                    @click="toggleDicom"
                  />
                  <q-btn
                    :color="showNii ? 'secondary' : 'grey'"
                    :icon="showNii ? 'visibility' : 'visibility_off'"
                    label="NII"
                    @click="toggleNii"
                  />
                </q-btn-group>

                <!-- 同步控制 -->
                <q-toggle
                  v-model="syncViews"
                  label="同步视图"
                  @update:model-value="updateSync"
                  class="q-mb-md"
                />

                <!-- 重置按钮 -->
                <q-btn
                  color="warning"
                  icon="refresh"
                  label="重置视图"
                  @click="resetViews"
                  class="full-width"
                />
              </q-card-section>
            </q-card>
          </q-card-section>
        </q-card>
      </div>

      <!-- 右侧显示区域 -->
      <div class="col-12 col-md-8">
        <q-card style="height: 600px;">
          <q-card-section class="full-height">
            <div v-if="!dicomLoaded && !niiLoaded" class="flex flex-center full-height">
              <div class="text-center">
                <q-icon name="layers" size="64px" color="grey-5" class="q-mb-md" />
                <div class="text-h6 text-grey-6">多模态影像融合</div>
                <div class="text-body2 text-grey-5">请分别加载DICOM和NII文件</div>
                <div class="text-caption text-grey-4 q-mt-sm">
                  支持结构像与功能像的融合显示
                </div>
              </div>
            </div>
            
            <div v-else-if="dicomLoaded || niiLoaded" class="full-height">
              <!-- 多模态图像显示容器 -->
              <div
                ref="fusionContainer"
                class="fusion-viewer full-height"
                style="background: #000; position: relative;"
              >
                <div v-if="loading" class="flex flex-center full-height">
                  <q-spinner-cube color="accent" size="40px" />
                </div>
                
                <!-- 图像信息叠加 -->
                <div class="image-overlay">
                  <div v-if="dicomLoaded && showDicom" class="text-white text-caption">
                    <q-icon name="medical_services" /> {{ dicomInfo.fileName }}
                  </div>
                  <div v-if="niiLoaded && showNii" class="text-white text-caption">
                    <q-icon name="psychology" /> {{ niiInfo.fileName }}
                  </div>
                  <div class="text-white text-caption">
                    融合模式: {{ fusionModeLabel }}
                  </div>
                  <div v-if="registrationResult" class="text-white text-caption">
                    配准精度: {{ registrationResult.accuracy }}%
                  </div>
                </div>

                <!-- 状态指示器 -->
                <div class="status-indicators">
                  <q-chip
                    v-if="dicomLoaded && showDicom"
                    color="primary"
                    text-color="white"
                    icon="medical_services"
                    size="sm"
                  >
                    DICOM ({{ Math.round(dicomOpacity * 100) }}%)
                  </q-chip>
                  <q-chip
                    v-if="niiLoaded && showNii"
                    color="secondary"
                    text-color="white"
                    icon="psychology"
                    size="sm"
                    class="q-ml-xs"
                  >
                    NII ({{ Math.round(niiOpacity * 100) }}%)
                  </q-chip>
                </div>
              </div>
            </div>
          </q-card-section>
        </q-card>
      </div>
    </div>
  </q-page>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useQuasar } from 'quasar'

const $q = useQuasar()

// 响应式数据
const dicomFile = ref<File | null>(null)
const niiFile = ref<File | null>(null)
const loading = ref(false)
const registering = ref(false)
const dicomLoaded = ref(false)
const niiLoaded = ref(false)
const fusionContainer = ref<HTMLElement | null>(null)

// 文件信息
const dicomInfo = ref({
  fileName: '',
  dimensions: ''
})

const niiInfo = ref({
  fileName: '',
  dimensions: ''
})

// 配准结果
const registrationResult = ref<{
  accuracy: number
  transform: string
} | null>(null)

// 融合控制
const fusionMode = ref('overlay')
const dicomOpacity = ref(0.7)
const niiOpacity = ref(0.5)
const niiColorMap = ref('hot')

// 视图控制
const showDicom = ref(true)
const showNii = ref(true)
const syncViews = ref(true)

// 颜色映射选项
const colorMapOptions = [
  { label: '热图', value: 'hot' },
  { label: '冷图', value: 'cool' },
  { label: '彩虹', value: 'rainbow' },
  { label: '骨骼', value: 'bone' },
  { label: '铜色', value: 'copper' }
]

// 计算属性
const fusionModeLabel = computed(() => {
  const modes: Record<string, string> = {
    overlay: '叠加显示',
    blend: '混合显示',
    compare: '对比显示'
  }
  return modes[fusionMode.value] || '未知模式'
})

// DICOM文件选择处理
const onDicomSelected = async (file: File | null) => {
  if (!file) return
  
  loading.value = true
  try {
    await loadDicomFile(file)
  } catch (error) {
    console.error('加载DICOM文件失败:', error)
    $q.notify({
      type: 'negative',
      message: '加载DICOM文件失败'
    })
  } finally {
    loading.value = false
  }
}

// NII文件选择处理
const onNiiSelected = async (file: File | null) => {
  if (!file) return
  
  loading.value = true
  try {
    await loadNiiFile(file)
  } catch (error) {
    console.error('加载NII文件失败:', error)
    $q.notify({
      type: 'negative',
      message: '加载NII文件失败'
    })
  } finally {
    loading.value = false
  }
}

// 加载DICOM文件
const loadDicomFile = async (file: File) => {
  dicomInfo.value = {
    fileName: file.name,
    dimensions: '512 × 512'
  }
  
  await new Promise(resolve => setTimeout(resolve, 800))
  
  dicomLoaded.value = true
  
  $q.notify({
    type: 'positive',
    message: 'DICOM文件加载成功'
  })
  
  // 如果NII也已加载，尝试自动配准
  if (niiLoaded.value) {
    await autoRegistration()
  }
}

// 加载NII文件
const loadNiiFile = async (file: File) => {
  niiInfo.value = {
    fileName: file.name,
    dimensions: '256 × 256 × 128'
  }
  
  await new Promise(resolve => setTimeout(resolve, 1000))
  
  niiLoaded.value = true
  
  $q.notify({
    type: 'positive',
    message: 'NII文件加载成功'
  })
  
  // 如果DICOM也已加载，尝试自动配准
  if (dicomLoaded.value) {
    await autoRegistration()
  }
}

// 自动配准
const autoRegistration = async () => {
  if (!dicomLoaded.value || !niiLoaded.value) return
  
  registering.value = true
  
  try {
    // 模拟配准过程
    await new Promise(resolve => setTimeout(resolve, 2000))
    
    registrationResult.value = {
      accuracy: 94.5,
      transform: 'Translation: (2.1, -1.3, 0.8) mm'
    }
    
    $q.notify({
      type: 'positive',
      message: '自动配准完成',
      caption: `配准精度: ${registrationResult.value.accuracy}%`
    })
  } catch (error) {
    console.error('配准失败:', error)
    $q.notify({
      type: 'negative',
      message: '配准失败'
    })
  } finally {
    registering.value = false
  }
}

// 手动配准
const manualRegistration = () => {
  $q.notify({
    type: 'info',
    message: '手动配准模式',
    caption: '此功能将在后续版本中实现'
  })
}

// 更新融合模式
const updateFusionMode = (mode: string) => {
  console.log('更新融合模式:', mode)
  // 这里应该调用图像融合库的相关方法
}

// 更新透明度
const updateOpacity = () => {
  console.log('更新透明度 - DICOM:', dicomOpacity.value, 'NII:', niiOpacity.value)
  // 这里应该调用图像显示库的透明度设置方法
}

// 更新颜色映射
const updateColorMap = (colormap: string) => {
  console.log('更新NII颜色映射:', colormap)
}

// 切换DICOM显示
const toggleDicom = () => {
  showDicom.value = !showDicom.value
  console.log('切换DICOM显示:', showDicom.value)
}

// 切换NII显示
const toggleNii = () => {
  showNii.value = !showNii.value
  console.log('切换NII显示:', showNii.value)
}

// 更新同步设置
const updateSync = (sync: boolean) => {
  console.log('更新视图同步:', sync)
}

// 重置视图
const resetViews = () => {
  dicomOpacity.value = 0.7
  niiOpacity.value = 0.5
  showDicom.value = true
  showNii.value = true
  fusionMode.value = 'overlay'
  niiColorMap.value = 'hot'
  
  $q.notify({
    type: 'info',
    message: '视图已重置'
  })
}

onMounted(() => {
  console.log('初始化多模态融合查看器')
})

onUnmounted(() => {
  console.log('清理多模态融合查看器资源')
})
</script>

<style scoped>
.fusion-viewer {
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

.image-overlay {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.8);
  padding: 8px 12px;
  border-radius: 4px;
  z-index: 10;
}

.status-indicators {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
}

.full-height {
  height: 100%;
}
</style>

